<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="admin/_fragment :: head">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AdminLTE 3 | User Profile</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="../../static/plugins/fontawesome-free/css/all.min.css">

    <link rel="stylesheet" href="../../static/plugins/editor.md/css/editormd.min.css">

    <link rel="stylesheet" href="../../static/plugins/selectize/css/selectize.default.css">

    <!-- Select2 -->
    <link rel="stylesheet" href="../../static/plugins/select2/css/select2.min.css">
    <!-- iCheck for checkboxes and radio inputs -->
    <link rel="stylesheet" href="../../static/plugins/icheck-bootstrap/icheck-bootstrap.min.css">

    <!-- SweetAlert2 -->
    <link rel="stylesheet" href="../../static/plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css">

    <!-- Theme style -->
    <link rel="stylesheet" href="../../static/css/adminlte.min.css">
</head>
<body class="hold-transition layout-top-nav">


<!-- Site wrapper -->
<div class="wrapper">
    <!-- Navbar -->
    <nav class="main-header navbar navbar-expand-md navbar-light navbar-white">
        <div class="container-fluid pl-5 pr-5">
            <a href="dashboard.html" th:href="@{/admin/toindex}" class="navbar-brand">
                <img src="../../static/upload/avatar.jpg" th:src="@{'/upload01/'+${session.user1.avatar}}" class="brand-image img-circle elevation-3">
                <span class="brand-text font-weight-light">ZengZK's Blog</span>
            </a>

            <button class="navbar-toggler order-1" type="button" data-toggle="collapse" data-target="#navbarCollapse"
                    aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse order-3" id="navbarCollapse">
                <!-- Left navbar links -->
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a href="dashboard.html" th:href="@{/admin/toindex}" class="nav-link">
                            <i class="nav-icon fas fa-tachometer-alt"></i>
                            仪表盘
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="blog-mgr.html" th:href="@{/admin/toblog}" class="nav-link">
                            <i class="fa fa-list-alt nav-icon"></i>
                            博客管理
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="category-mgr.html" th:href="@{/admin/totypepage}" class="nav-link">
                            <i class="fa fa-bookmark nav-icon"></i>
                            分类管理
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="tag-mgr.html" th:href="@{/admin/totagpage}" class="nav-link">
                            <i class="fa fa-tags nav-icon"></i>
                            标签管理
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- /.navbar -->

    <div class="container-fluid pl-5 pr-5 mt-3">
        <form id="blogForm" action="#" th:action="@{/admin/modifyblog}" method="post">
            <input type="hidden" name="userId" th:value="${session.user.id}">
            <input type="hidden" name="id" th:value="${blog.id}">
            <input type="hidden" name="createTime" th:value="${blog.createTime}">
            <input type="hidden" name="views" th:value="${blog.views}">
            <!-- /.card-body -->
            <div class="card card-teal card-outline">
                <div class="card-header">
                    <h3 class="card-title">博客信息</h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-7">
                            <div class="form-group">
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <label for="title" class="input-group-text">标题</label>
                                    </div>
                                    <!-- /btn-group -->
                                    <input type="text" class="form-control" id="title" name="title"
                                           placeholder="博客标题(必填, 30字内)..."
                                           maxlength="30" th:value="${blog.title}">
                                </div>
                            </div>
                            <!--                            <div class="form-group">-->
                            <!--                                <div class="input-group">-->
                            <!--                                    <div class="input-group-prepend">-->
                            <!--                                        <label for="title" class="input-group-text">首图地址</label>-->
                            <!--                                    </div>-->
                            <!--                                    &lt;!&ndash; /btn-group &ndash;&gt;-->
                            <!--                                    <input type="text" class="form-control" id="firstpicture" name="firstPicture"-->
                            <!--                                           placeholder="首图地址"-->
                            <!--                                           maxlength="30">-->
                            <!--                                </div>-->
                            <!--                            </div>-->
                        </div>

                        <div class="col-md-5">
                            <!-- radio -->
                            <div class="form-group clearfix">
                                <div class="icheck-default d-inline-block">
                                    <input th:checked="${blog.flag=='原创'}" type="radio" id="original" name="flag"
                                           value="原创" checked="checked">
                                    <label for="original">原创</label>
                                </div>
                                <div class="icheck-default d-inline-block ml-3">
                                    <input th:checked="${blog.flag=='转载'}" type="radio" id="reprinted" name="flag"
                                           value="转载">
                                    <label for="reprinted">转载</label>
                                </div>
                                <div class="icheck-default d-inline-block ml-3">
                                    <input th:checked="${blog.flag=='翻译'}" type="radio" id="translated" name="flag"
                                           value="翻译">
                                    <label for="translated">翻译</label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="categoryId">分类</label>
                                <select id="categoryId" name="typeId" class="select2"
                                        data-placeholder="选择分类(必选)...."
                                        style="width: 100%;">
                                    <option></option>
                                    <option th:text="${type1.name}" th:value="${type1.id}" selected></option>
                                    <option value="1" th:each="type:${typelist}" th:text="${type.name}"
                                            th:if="${type1.name}!=${type.name}" th:value="${type.id }">架构
                                    </option>
                                    <!--                                    <option value="2">后端</option>-->
                                    <!--                                    <option value="3">全栈</option>-->
                                    <!--                                    <option value="4">架构</option>-->
                                    <!--                                    <option value="5">天上人间</option>-->
                                    <!--                                    <option value="6">我是一只猫</option>-->
                                </select>
                            </div>
                            <!-- /.form-group -->
                        </div>
                        <!-- /.col -->
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="tagId">标签</label>
                                <select id="tagId" name="tagId" class="select2" multiple="multiple"
                                        data-placeholder="选择标签...."
                                        style="width: 100%;">
                                    <option></option>
                                    <span th:each="atag:${ataglist}">
                                         <option th:text="${atag.name}" th:value="${atag.id}" name="tag"
                                                 selected></option>

                                    <option th:each="  tag :${taglist}" name="tag" th:text="${tag.name}"
                                            th:if="${atag.name}!=${tag.name}" th:value="${tag.id}" value="1">
                                        Spring
                                    </option>
                                </span>

                                    <!--                                    <option value="2">JavScript</option>-->
                                    <!--                                    <option value="3">HTML</option>-->
                                    <!--                                    <option value="4">Spring</option>-->
                                    <!--                                    <option value="5">SpringBoot</option>-->
                                    <!--                                    <option value="6">我的笔记</option>-->
                                </select>
                            </div>
                            <!-- /.form-group -->
                        </div>
                        <!-- /.col -->
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="description">博客描述</label>
                                <textarea th:text="${blog.description}" class="form-control" rows="5" id="description"
                                          name="description"
                                          placeholder="博客描述（必填, 200字内）..."
                                          maxlength="200" style="resize:none"></textarea>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-2">
                            <div class="icheck-default float-left">
                                <input type="checkbox" th:checked="${blog.recommend==true}" id="recommend"
                                       name="recommend">
                                <label for="recommend">推荐</label>
                            </div> <div class="icheck-default float-left">
                                <input type="checkbox" th:checked="${blog.top==true}" id="top"
                                       name="top">
                                <label for="top">置顶</label>
                            </div>
                        </div>
                        <div class="col-md-10">
                            <button id="publishBtn" name="status" value="1" type="submit"
                                    class="btn btn-sm btn-success float-right">
                                <i class="fa fa-edit"></i>
                                发布
                            </button>
                            <button id="saveBtn" name="status" value="0" type="submit"
                                    class="btn btn-sm btn-dark float-right mr-1">
                                <i class="fa fa-save"></i>
                                保存
                            </button>
                            <button type="button" class="btn btn-sm btn-info float-right mr-1" data-toggle="modal"
                                    data-target="#addTagModal">
                                <i class="fas fa fa-plus"></i>
                                标签
                            </button>
                            <button type="button" class="btn btn-sm btn-primary float-right mr-1" data-toggle="modal"
                                    data-target="#addCategoryModal">
                                <i class="fa fa-plus"></i>
                                分类
                            </button>
                        </div>
                    </div>
                </div>
                <!-- /.row -->
            </div>

            <!-- /.card-body -->
            <div id="editormd" class="form-group mb-3">
                <textarea th:text="${blog.content}" name="content">111</textarea>
            </div>

            <input type="hidden" id="isPublish" name="isPublish">
        </form>
    </div>
</div>
<!-- ./wrapper -->

<div class="modal fade" id="addTagModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">新增标签</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <input type="text" id="tagInput" name="tag" value="awesome,neat">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button id="addTagBtn" type="button" class="btn btn-success">新增</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

<div class="modal fade" id="addCategoryModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">新增标签</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <input type="text" id="categoryInput" name="category" value="前端,后台">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button id="addCategoryBtn" type="button" class="btn btn-success">新增</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

<div th:replace="admin/_fragment :: js">
    <script src="../../static/plugins/jquery/jquery.min.js" th:src="@{/plugins/jquery/jquery.min.js}"></script>
    <!-- Bootstrap 4 -->
    <script src="../../static/plugins/bootstrap/js/bootstrap.bundle.min.js"
            th:src="@{/plugins/bootstrap/js/bootstrap.bundle.min.js}"></script>
    <!-- AdminLTE App -->
    <script src="../../static/js/adminlte.min.js" th:src="@{/js/adminlte.min.js}"></script>

    <!-- SweetAlert2 -->
    <script src="../../static/plugins/sweetalert2/sweetalert2.min.js"
            th:src="@{/plugins/sweetalert2/sweetalert2.min.js}"></script>

    <script src="../../static/plugins/editor.md/js/editormd.min.js"
            th:src="@{/plugins/editor.md/js/editormd.min.js}"></script>

    <!-- Select2 -->
    <script src="../../static/plugins/select2/js/select2.full.min.js"
            th:src="@{/plugins/select2/js/select2.full.min.js}"></script>

    <script src="../../static/plugins/selectize/js/standalone/selectize.min.js"
            th:src="@{/plugins/selectize/js/standalone/selectize.min.js}"></script>

    <!--<script src="../../static/js/edit.js" th:src="@{/js/edit.js}"></script>-->
    <script src="../../static/js/categoryinput.init.js" th:src="@{/js/categoryinput.init.js}"></script>
    <script src="../../static/js/taginput.init.js" th:src="@{/js/taginput.init.js}"></script>


</div>
<script>
    $(function () {
        /**
         * Initialize Select2
         */
        $('.select2').select2();

        /**
         * Initialize SweetAlert2
         */
        const Toast = Swal.mixin({
            toast: true,
            position: 'top-end',
            showConfirmButton: true,
            timer: 3000
        });

        /**
         * Initialize editor.md  初始化 markdown
         */
        var blogEditor = editormd("editormd", {
            width: "100%",
            height: 580,
            // syncScrolling: "single",
            htmlDecode: true,
            taskList: true,
            toolbarIcons: function () {
                // Using "||" set icons align right.
                return [
                    "undo", "redo", "|",
                    "bold", "del", "italic", "quote", "ucwords", "uppercase", "lowercase", "|",
                    "h1", "h2", "h3", "h4", "h5", "h6", "|",
                    "list-ul", "list-ol", "hr", "|",
                    "link", "reference-link", "image", "code", "preformatted-text", "code-block", "table", "datetime", "html-entities", "pagebreak", "|",
                    "goto-line", "watch", "preview", "clear", "search", "|",
                    "help", "info"
                ];
            },
            path: '/plugins/editor.md/lib/'
            // disabledKeyMaps: [
            //   "F11" , // disable some default keyboard shortcuts handle
            // ],
            // onload: function () {
            //   var keyMap = {
            //     "Ctrl-S": function (cm) {
            //       $('#isPublish').val(false);
            //       if (validateBlogForm()) {
            //         $.ajax({
            //           url: '',
            //           type: 'POST',
            //           data: $('#blogForm').serialize(),
            //           dataType: 'json',
            //           success: function (data) {
            //
            //           },
            //           error: function (error) {
            //
            //           }
            //         });
            //       }
            //     },
            //   };
            //   this.addKeyMap(keyMap);
            // }
        });

        /**
         * 判断字符串是否为空
         * @param str
         * @returns {boolean}
         */
        // function isNull(str) {
        //   return str === null || str === undefined || str.trim() === '';
        // }

        /**
         * 校验博客表单，标题、分类、描述、内容不能为空
         * @returns {boolean}
         */
        // function validateBlogForm() {
        //   var blogTitle = $('#title').val();
        //   var blogCategoryId = $('#categoryId').val();
        //   var blogDescription = $('#description').val();
        //   var blogContent = blogEditor.getMarkdown();
        //
        //   if (isNull(blogTitle)) {
        //     Toast.fire({
        //       icon: 'error',
        //       title: '博客标题不能为空！'
        //     });
        //     return false;
        //   }
        //
        //   if (isNull(blogCategoryId)) {
        //     Toast.fire({
        //       icon: 'error',
        //       title: '请选择博客分类！'
        //     });
        //     return false;
        //   }
        //
        //   if (isNull(blogDescription)) {
        //     Toast.fire({
        //       icon: 'error',
        //       title: '博客描述不能为空！'
        //     });
        //     return false;
        //   }
        //
        //   if (isNull(blogContent)) {
        //     Toast.fire({
        //       icon: 'error',
        //       title: '博客内容不能为空！'
        //     });
        //     return false;
        //   }
        //
        //   return true;
        // }
        //
        // /**
        //  * 发布按钮事件
        //  */
        // $('#publishBtn').on('click', function () {
        //   if (validateBlogForm()) {
        //     $('#isPublish').val(true);
        //     $('#blogForm').submit();
        //   }
        //   return false;
        // });
        //
        // /**
        //  * 保存按钮事件
        //  */
        // $('#saveBtn').on('click', function () {
        //   if (validateBlogForm()) {
        //     $('#isPublish').val(false);
        //     $('#blogForm').submit();
        //   }
        //   return false;
        // });
    });
</script>
</body>
</html>